<style lang="stylus" scoped>
bgBlue = linear-gradient(to right, #04befe, #4481eb);
  nav
    width 100%
    height 50px
    background bgBlue
    img
      display inline-block
      float left
      width 25px
      height 25px
      margin 12px 10px
    p
      display inline-block
      width 80%
      float left
      font-size 18px
      color #ffffff
      text-align center
      line-height 50px
  .detail
    text-align center
    img
      display block
      width 120px
      height 120px
      margin 70px auto 30px auto
    p
      font-size 1.8rem
    h3
      font-size 3.6rem
      color #000
      font-weight normal
      margin-bottom 20px
  .btn
      line-height 2.3rem
      font-size 1.6rem
      width 90%
      margin 10px 5%
      background bgBlue
  .btn2
    border 1px solid bgBlue
    background #fff
    color #4481eb
</style>

<template>
  <div class="myBalance">
    <nav>
      <router-link to="/goHome">
      <img src="./imgs/icon-left.png" alt="">
      <p>我的余额</p>
      </router-link>
    </nav>
    <div class="detail">
      <img src="./imgs/icon-16@2x.png" alt="">
      <p>我的余额</p>
      <h3 v-if="this.$store.state.user.userBalance">￥{{this.$store.state.user.userBalance}}</h3>
      <h3 v-else>￥0.00</h3>
      <Button class="btn" type="primary" shape="circle" @click="payCreate">充值</Button>
      <!-- <router-link to="/recharge">
      </router-link> -->
      <Button class="btn btn2" type="primary" shape="circle">
        <router-link to="/withdraw?moneyType=userBalance">
          提现
         </router-link>
      </Button>
    </div>

    <!-- <p>当前位置: >{{$route.params.userName}}我的余额</p> -->
  </div>
</template>

<script>
export default {
  name: 'myBalance',
  mounted () {
    if(!this.$store.state.show){
      this.$router.push({path: '/repayment'});
    }
  },
  data () {
    return {

    }
  },
  methods: {
    payCreate(){
      window.location.href="/pay/create?openId=o-XkR1b_38eq32faZW4NIKo7bt4c"
    }
  }
}
</script>

